<template>
  <PageWrapper title="编辑商品" contentBackground contentClass="p-4" @back="goBack">
    <BasicUpload
      :maxSize="20"
      :maxNumber="10"
      @change="handleChange"
      :api="uploadApi"
      class="my-5"
      :accept="['image/*']"
    />

    <a-alert message="嵌入表单,加入表单校验" />
    <BasicForm
      @register="registerForm"
      :labelWidth="100"
      :schemas="schemas"
      :actionColOptions="{ span: 24 }"
      :showResetButton="false"
      class="edit"
      @submit="handleSubmit"
    />
  </PageWrapper>
</template>
<script lang="ts">
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { defineComponent, ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { useGo } from '/@/hooks/web/usePage';
  import { useRouter } from 'vue-router';
  import {
    editProduct,
    getProductDetail,
    getProductStatesList,
    saveProduct,
  } from '/@/api/sys/productList';
  import { uploadApi } from '/@/api/sys/upload';
  let infoIdDefault = ref([]);
  let infoProductId = ref('');
  let infoName = ref('');
  let infoPrice = ref('');
  let type = ref<boolean>(false);
  let textSysNo = ref<number>(0);
  let infoAmount = ref([]);
  let infoDescription = ref('');
  let infoSpec = ref('');
  let infoImg = ref('');
  let hdId = ref([]);
  const schemas: FormSchema[] = [
    {
      field: 'idDefault',
      defaultValue: infoIdDefault,
      component: 'ApiSelect',
      label: '商品类型',
      componentProps: {
        placeholder: '请选择商品类型',
        api: getProductStatesList,
        resultField: 'list',
        labelField: 'text',
        valueField: 'value',
      },
      required: true,
    },
    {
      field: 'productId',
      defaultValue: infoProductId,
      component: 'Input',
      label: '商品编号',
      componentProps: {
        placeholder: '请输入商品编号',
      },
      required: true,
    },
    {
      field: 'name',
      defaultValue: infoName,
      component: 'Input',
      label: '商品名称',
      componentProps: {
        placeholder: '商品名称',
      },
      required: true,
    },
    {
      field: 'price',
      defaultValue: infoPrice,
      component: 'Input',
      label: '商品价格(/元)',
      componentProps: {
        placeholder: '请输入数字(限数字)',
        oninput: "value=value.replace(/[^0-9.]/g,'')",
      },
      required: true,
    },
    {
      field: 'amount',
      defaultValue: infoAmount,
      component: 'Input',
      label: '商品数量',
      componentProps: {
        placeholder: '请输入数字(限数字)',
        oninput: "value=value.replace(/[^0-9.]/g,'')",
      },
      required: true,
    },
    {
      field: 'description',
      defaultValue: infoDescription,
      component: 'Input',
      label: '商品描述',
      componentProps: {
        placeholder: '商品描述',
      },
      required: true,
    },
    {
      field: 'spec',
      defaultValue: infoSpec,
      component: 'Input',
      label: '配送范围',
      componentProps: {
        placeholder: '配送范围',
      },
      required: true,
    },
    {
      field: 'imgPath',
      defaultValue: infoImg,
      component: 'Input',
      label: '图片',
      componentProps: {
        placeholder: '图片',
      },
      required: true,
    },
  ];
  const [registerForm, { getFieldsValue }] = useForm({
    submitButtonOptions: { text: '提交' },
  });
  export default defineComponent({
    name: 'DocumentEdit',
    components: { BasicForm, PageWrapper },
    setup() {
      const go = useGo();
      const { currentRoute } = useRouter();
      const { createMessage } = useMessage();
      function goBack() {
        go('/document/productManager');
      }

      (async () => {
        const { id } = currentRoute.value.query;
        if (id) {
          const res = await getProductDetail({ id: parseInt(id as string) });
          console.log(res);
          infoIdDefault.value = res.is_default;
          infoProductId.value = res.product_no;
          infoName.value = res.name;
          infoPrice.value = res.price;
          infoAmount.value = res.amount;
          infoDescription.value = res.description;
          textSysNo.value = res.id;
          infoSpec.value = res.spec;
          infoImg.value = res.imgPath;
          hdId.value = res.hd_id;
          type.value = true;
        } else {
          infoIdDefault.value = [];
          infoProductId.value = '';
          infoName.value = '';
          infoPrice.value = '';
          infoAmount.value = [];
          infoDescription.value = '';
          infoSpec.value = '';
          infoImg.value = '';
          hdId.value = [];
          type.value = false;
        }
      })();

      return {
        handleChange: (list: string[]) => {
          createMessage.info(`已上传文件${JSON.stringify(list)}`);
        },
        getFieldsValue,
        uploadApi,
        registerForm,
        infoProductId,
        schemas,
        infoName,
        infoPrice,
        infoAmount,
        type,
        textSysNo,
        infoIdDefault,
        infoDescription,
        infoSpec,
        infoImg,
        hdId,
        handleSubmit: async (values: any) => {
          const hdid = currentRoute.value.query.hdid;
          console.log(hdid);
          if (type.value) {
            await editProduct({
              name: values.name,
              description: values.description,
              amount: values.amount,
              price: values.price,
              idDefault: values.idDefault,
              spec: values.spec,
              productId: values.productId,
              imgPath: values.imgPath,
              id: textSysNo.value,
              hdId: hdid,
            });
            createMessage.success('编辑成功');
            go('/document/productManager?hd_id=' + hdid);
          } else {
            await saveProduct({
              name: values.name,
              description: values.description,
              amount: values.amount,
              price: values.price,
              idDefault: values.idDefault,
              spec: values.spec,
              productId: values.productId,
              imgPath: values.imgPath,
              hdId: hdid,
            });
            createMessage.success('提交成功');
            go('/document/productManager?hd_id=' + hdid);
          }
        },
        goBack,
      };
    },
  });
</script>
